<script setup>

    const toCodeHome = (router) => {
        // 使用 `router.push` 进行路由导航
        // 字符串路径
        router.push("/codehome");

    };

    const toCodeChild = (router) => {
        // 带有路径的对象
        router.push({ path: "/codehome/codechild" });
    };

    const toHomeNameWithParams = (router) => {
        // 命名的路由，并加上参数
        router.push({ name: "userWithParam", params: { userId: 123 } });
    };

    const searchSomething = (router) => {
        // 带查询参数
        router.push({ name: "search", query: { q: "今天吃什么" } });
    };
</script>
<template>
    <div>
      <h1>Home Page</h1>
      <p>
        <button @click="toCodeHome($router)">
          点击跳转到 toCodeHome 的路由地址
        </button>
      </p>
      <p>
        <button @click="toCodeChild($router)">
          点击跳转到 path 为 /codehome/codechild 的路由地址
        </button>
      </p>
      <p>
        <button @click="toHomeNameWithParams($router)">
          点击跳转到 name 为 userWithParam 且包含参数的路由地址
        </button>
      </p>
      <p>
        <button @click="searchSomething($router)">
          点击跳转到 name 为 search 且包含查询参数的路由地址
        </button>
      </p>
      <router-view></router-view>
    </div>
    <hr>
  </template>
